<template>
  <div>
	<div class="head">
		<div class="tabls">
			<div class="logo">
				<img src="@/assets/HiLL.png" style="width: 3rem" /><font color="red">   Hi邻邻</font>
			</div>
			
			<div class="li" :class="{'as':index == i}" v-for="(t,i) in tabls" :key='i' @click="click(i)">{{t}}</div>
	</div>
		<v-touch @swipeleft='left' @swiperight='right'>
			<div class="tablBox" v-if="index == 0">
				<el-container>
    <el-aside width="200px">
		<Aside />
	</el-aside>
    <el-container>
    <el-main>
		<Slideshow />
	</el-main>
    </el-container>
  </el-container>
			</div>
			<div class="tablBox" v-if="index == 1">
				<el-col>
					<PostBar />
				</el-col>
			</div>
			<div class="tablBox" v-if="index == 2">
				<el-col>
					<Photo />
				</el-col>
			</div>
			<div class="tablBox" v-if="index == 3">
				<el-col>
					<Family />
				</el-col>
			</div>
			<div class="tablBox" v-if="index == 4">
				<el-col>
					<el-button @click="this.$router.push('@/views/Login/LoginFrame')"></el-button>
				</el-col>
			</div>
		</v-touch>

	</div>
	
  </div>
</template>

<script>
import Family from './Family.vue';
import Photo from './Photo.vue';
import PostBar from './PostBar.vue';
import Slideshow from './Slideshow.vue';
import Aside from './Aside.vue';

export default {
	name: "Frame",
	components: {
		Family,
		Photo,
		PostBar,
		Slideshow,
		Aside,
	},

    data() {
      return {
		index:0,
		oldIndex:0,
		tabls:['首页','贴吧','我的相册','我的家庭','退出登录',]
      };
    },
    methods: {
		left(){
			this.index+=1;
			if (this.index > (this.tabls.length -1)) {
				this.index = 0;
			}
			
		},
		right(){
			this.index-=1;
			if (this.index < 0) {
				this.index = (this.tabls.length -1);
			}
		},
		click(i){
			this.index = i;
		}
    },
    created() {
      
    },
	mounted (){
		
	}
  };

</script>

<style>

.tablBox{
	width:98%;
	height: 500px;
	margin: 0 auto;
	border: 1px solid #4bdf88;
	box-shadow: 1px 1px 1px hsl(145, 68%, 60%);
	border-radius: 5px;
}
.tabls{
	width: 98%;
	margin: 10px auto;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.tabls .logo{
	margin-right: 750px;
}
.tabls .li{
	padding: 5px;
	margin: 0 5px;
	font-size: 16px;
}
.tabls .li.as{
	color: #71ee8c;
	border-bottom:1px solid #91f363;
	box-shadow: 1px 1px 1px #ccc;
}
.headImg {
  width: 3rem;
  border-radius: 50%; /*圆角 */
}
.item {
  margin-top: 5px;
  margin-right: 20px;
}


  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 450px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 150px;
  }
  

</style>